import React from 'react'
import { useLocation } from "react-router-dom"
import "../style/style.scss"
import { ActionBar } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import {useDispatch,useSelector} from "react-redux"
import {useNavigate} from "react-router-dom"
import * as action from "../action"
function Detail() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const store = useSelector((state)=>{
        return {
            ...state.shopreducer
        }
    })
    const loaction = useLocation()
    console.log(loaction);
    let addShop = (item) => {
        console.log(item,"item")
        dispatch(action.addshop(item))
        //
    }
    return (
        <div>
            {
                loaction.state.item ? <div>
                    <img src={loaction.state.item.img} alt="图片加载失败" />
                    <h4>商品名{loaction.state.item.title}</h4>
                    <h4>价格：{loaction.state.item.price} 描述:{loaction.state.item.desc}</h4>
                </div> : ""
            }
            <div className='demo-action-bar'>
                <ActionBar>
                    <ActionBar.Icon icon={<ChatO />} text="客服" onClick={() => console.log('chat click')} />
                    <ActionBar.Icon icon={<CartO />} text="购物车" onClick={() => navigate("/all/shopcar")} />
                    <ActionBar.Icon icon={<ShopO />} text="店铺" onClick={() => console.log('shop click')} />
                    <ActionBar.Button type="danger" text="加入购物车" onClick={() => addShop(loaction.state.item)} />
                </ActionBar>
            </div>
        </div>
    )
}

export default Detail